<template>  
  <!-- 吸顶头部 -->  
  <view class="p-big fixed-top flex justify-between mt-2 header font-sm" :style="{ padding: '0 ' + paddingSize + 'rpx' }">  
    <view class="flex">  
      <text class="text-orange mr-4" @click="goindex()">回到首页</text>  
      <text>你好，欢迎</text>  
      <view>  
        <navigator url="/pages/Login/Login"> [请登录]</navigator>  
      </view>  
      <view>  
        <navigator url="/pages/Login/register"> [免费注册] </navigator>  
      </view>  
    </view>  
    <view class="header-right flex">  
      <view class="text">  
        <navigator url="/pages/MyServices/MyServices"> 我的服务 </navigator>  
      </view>  
      <view class="text">  
        <navigator url="/pages/MyMessage/MyMessage"> 我的消息 </navigator>  
      </view>  
      <view class="text">  
        <navigator url=""> 移动端APP </navigator>  
      </view>  
      <view class="text">  
        <navigator url=""> 客户服务 </navigator>  
      </view>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  name: "top-nav",  
  data() {  
    return {  
      paddingSize: 225 // 默认内边距大小  
    };  
  },  
  mounted() {  
    // 根据窗口尺寸调整内边距大小  
    window.addEventListener('resize', this.updatePaddingSize);  
    this.updatePaddingSize();  
  },  
  beforeDestroy() {  
    // 清除窗口尺寸变化事件监听器  
    window.removeEventListener('resize', this.updatePaddingSize);  
  },  
  methods: {  
    updatePaddingSize() {  
      // 根据窗口宽度调整内边距大小，这里只是一个示例，你可以根据自己的需求进行修改  
      if (window.innerWidth >= 1200) {  
        this.paddingSize = 200;  
      } else if (window.innerWidth >= 992) {  
        this.paddingSize = 150;  
      } else if (window.innerWidth >= 768) {  
        this.paddingSize = 100;  
      } else {  
        this.paddingSize = 50;  
      }  
    },
	goindex(){
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
  }  
}  
</script>
<style lang="scss">
	navigator:hover {
		color: #fc7c08;
	}

	.p-big {
		padding: 0 225rpx;
	}

	.header-right {
		margin-left: 30rpx;
	}

	.header .text {
		margin-right: 20rpx;
	}
</style>